<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中样式的引用</title>
  <script src="../Vue.js"></script>
<style>
  .red {
    color: red;
  }

  .thin{
    font-weight : 200;
  }

  .italic{
    font-style: italic;
  }

  .active{
    letter-spacing: 0.5em;
  }

</style>
</head>
<body>
  <div id="app">

<!--&lt;!&ndash;    第一种方法 运用数组，类名用‘’号包裹&ndash;&gt;-->
<!--      <h1 :class = "['red','thin']">这是一个很大的h1标签，大到你无法想象</h1>-->

<!--    &lt;!&ndash;第二种 在数组中引入三目运算符， 利用不带引号的属性去data中找值来判断一些样式是否激活&ndash;&gt;-->
<!--    <h1 :class = "['red','thin' , flag? 'active': '',]">这是一个很大的h1标签，大到你无法想象</h1>-->

<!--&lt;!&ndash;    第三种 在数组中引入对象  利用键值对的关系 则 如果值为false 这个键就不会应用上,提高了代码的可读性&ndash;&gt;-->
<!--    <h1 :class = "['red','thin' ,{ 'active' : false , 'italic' : true }  ]">这是一个很大的h1标签，大到你无法想象</h1>-->


    <h1 :class = " { 'red' : false , 'thin':false , 'active': true, } ">这是一个很大的h1标签，大到你无法想象</h1>

  </div>

<script>
    new Vue({
      el : '#app',
      data : {
        flag : false,
      },
      methods : {

      }
    })

</script>
</body>
</html>
